import React, { useState } from 'react';
import { Cascader } from 'antd';
import cityList from '@/common/cityTwoLevel';
import '../../index.less'
export default (props) => {
  const { onConfirm,defaultValue } = props;
  const [chooseCity, setChooseCity] = useState(defaultValue);

  return (
    <div className='tiledSelectPage'>
    <div className="offwards">
      <div className="restrict">院校省份：</div>
      <Cascader
        allowClear
        placeholder="请选择省市"
        options={cityList}
        style={{ width: 640, minHeight: 32}}
        multiple
        popupClassName="custom-class"
        treeCheckStrictly={true}
        showCheckedStrategy={Cascader.SHOW_PARENT}
        expandTrigger="hover"
        dropdownRender={(menus)=>(
          <div>{menus}</div>
        )}
        onChange={(value) => {
          setChooseCity(value);
          if(!value.length){
            onConfirm('',value);
          }
        }}
        value={chooseCity}
      />
      <div
        className="surefire"
        onClick={() => {
          let province = [];
          let city = [];
          let provinceList = [];
          let cityTeam = [];
          chooseCity.map((item) => {
            if (item.length === 1) {
              province.push(item.join(','));
            } else if (item.length === 2) {
              city.push(item);
            }
          });
          if (city.length) {
            cityTeam = city.map((item) => item[1]);
          }
          if (province.length) {
            province.map((item) => {
              let findList = cityList.find((items) => {
               return items.value === item;
              });
              findList.children?.map((itemer)=>{
                provinceList.push(itemer.value)
              })
            });
          }
          let combineList=[...provinceList,...cityTeam].join(',')
          onConfirm(combineList,chooseCity);
        }}
      >
        搜索
      </div>
    </div>
    </div>
  );
};
